<template>
  <el-container direction="vertical" class="girl-table-wrapper">
    <div class="girl-table-page">
      <div v-for="(item,index) in girlData.data" :key="index" @click="onEnterDetail(item)">
        <el-card class="girl-item" :body-style="{ padding: '0px' }" shadow="hover">
          <div class="girl-title-content">
            <div class="girl-type">{{item.author}}</div>
            <div class="girl-title">{{item.title}}</div>
          </div>
          <div class="girl-author">{{item.author}} <span>- </span>{{item.type}}</div>
          <img :src="item.url" class="girl-image-content"/>
          <div class="girl-introduce">
            {{item.desc}}
          </div>
        </el-card>
      </div>
    </div>
    <el-pagination class="girl-page" background @current-change="pageCurrentChange" :page-size="girlData.page_count"
                   :current-page.sync="girlData.page" layout="total,prev, pager, next, jumper"
                   :total="girlData.total_counts">
    </el-pagination>
  </el-container>
</template>

<script>
  import { getGirlList } from '../../api/index'

  export default {
    name: 'GirlTable',
    data () {
      return {
        page: 1,
        girlData: {},
      }
    },
    mounted () {
      this.getGirlDataList()
    },
    methods: {
      getGirlDataList () {
        getGirlList({ page: this.page }).then(data => {
          if (data.status === 100) {
            this.girlData = data
          }
        }).catch(error => {

        })
      },
      pageCurrentChange (page) {
        this.page = page
      },
      onEnterDetail (item) {
        this.$store.commit('SAVE_MENU_STATE', false)
        let girlRouter = this.$router.resolve({
          path: '/girlDetailIndex',
          query: {
            id: item._id
          }
        })
        window.open(girlRouter.href, '_blank')
      }
    },
    watch: {
      page (value) {
        this.getGirlDataList()
      }
    }
  }
</script>

<style lang="scss" ref="stylesheet/scss" scoped>

  .girl-table-wrapper {
    width: 100%;
    height: 100%;

    .girl-table-page {
      width: 75%;
      margin: 0 auto;

      .girl-item {
        cursor: pointer;
        text-align: left;
        float: left;
        height: 375px;
        border: 1px solid transparent;
        margin-top: 20px;
        border-radius: 8px;
        padding: 10px;
        background-color: rgba(29, 31, 32, 1);
        width: 45%;
        margin-left: 2%;

        .girl-title-content {
          width: 100%;
          height: 25px;
          line-height: 25px;

          .girl-type {
            background-color: #4FA8FF;
            border-radius: 3px;
            padding: 0 5px;
            color: #F2F2F2;
            float: left;
          }

          .girl-title {
            float: left;
            color: white;
            margin-left: 5px;
            font-size: 20px;
          }
        }

        .girl-author {
          color: white;
          margin-top: 10px;
        }

        .girl-image-content {
          margin-top: 10px;
          background-color: #2F4B6B;
          position: relative;
          width: 100%;
          border-radius: 8px;
          transition: all 0.6s;
          height: 260px;
          object-fit: none;
        }

        .girl-introduce {
          color: white;
          margin-top: 15px;
          margin-bottom: 10px;
        }

        &:hover {
          .girl-image-content {
            transform: scale(1.02);
            -ms-transform: scale(1.02);
          }
        }
      }
    }

    .girl-page {
      margin-top: 10px;
    }
  }

</style>
